<template>
  <cfg-form
    ref="form"
    v-bind="finalAttrs"
    :data="data"
    @change="change"
  ></cfg-form>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      finalAttrs: {},
    };
  },
  props: {
    data: {
      default: () => {
        return {};
      },
    },
    attrs: {
      default: () => {
        return {};
      },
    },
  },
  watch: {},
  computed: {
    defaultColumn() {
      return [
        {
          key: "type",
          title: "编辑器类型",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "select",
            options: [
              { label: "文本", value: "text" },
              { label: "数字", value: "number" },
              { label: "日期", value: "date" },
              { label: "时间", value: "time" },
              { label: "日期时间", value: "datetime" },
              { label: "下拉框", value: "select" },
              { label: "多选", value: "multiCheck" },
              { label: "单选", value: "check" },
              { label: "显示", value: "display" },
            ],
          },
        },
        {
          key: "key",
          title: "字段名称",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "text",
          },
        },
        {
          key: "title",
          title: "字段标签",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "text",
          },
        },
        {
          key: "required",
          title: "必填",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "check",
          },
        },
        {
          key: "readonly",
          title: "只读",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "check",
          },
        },
      ];
    },
    numberColumn() {
      return [
        {
          key: "min",
          title: "最小值",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "number",
          },
        },
        {
          key: "max",
          title: "最大值",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "number",
          },
        },
        {
          key: "step",
          title: "步长",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "number",
            step: 0.01,
            precision: 2,
          },
        },
        {
          key: "precision",
          title: "精度",
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "number",
            min: 0,
            max: 6,
            step: 1,
            precision: 0,
          },
        },
      ];
    },
    optionsColumn() {
      return [
        {
          key: "options",
          title: "选项",
          required: true,
          minWidth: 100,
          align: "center",
          show: true,
          config: {
            type: "array",
          },
        },
      ];
    },
  },
  created() {},
  mounted() {
    this.finalAttrs = this.getAttrs();
  },
  methods: {
    columns() {
      let type = "display";
      let typeList = [
        "text",
        "number",
        "date",
        "time",
        "datetime",
        "select",
        "multiCheck",
        "check",
        "display",
      ];
      if (typeList.includes(this.data.type)) {
        type = this.data.type;
      }
      return [
        ...(type === "number" ? this.numberColumn : []),
        ...(type === "select" || type === "multiCheck"
          ? this.optionsColumn
          : []),
      ];
    },
    rules() {
      let rules = {};
      let columns = this.columns();
      columns.map((col) => {
        if (col.required) {
          rules[col.key] = [
            {
              required: col.required,
              message: "请输入" + col.title,
              trigger: "blur",
            },
          ];
        }
      });
      columns.map((col) => {
        if (!this.data[col.key]) {
          this.$set(this.data, col.key, null);
        }
      });
      let keys = Object.keys(this.data);
      keys.map((key) => {
        if (!columns.find((col) => col.key === key)) {
          delete this.data[key];
        }
      });
      return rules;
    },
    getAttrs() {
      return {
        labelWidth: 100,
        labelPosition: "right",
        cols: 3,
        ...this.attrs,
        columns: [...this.defaultColumn, ...this.columns()],
        rules: {
          type: [
            { required: true, message: "请输入编辑器类型", trigger: "blur" },
          ],
          key: [{ required: true, message: "请输入模型类名", trigger: "blur" }],
          title: [
            { required: true, message: "请输入模型类名", trigger: "blur" },
          ],
          ...this.rules,
        },
        onlyRead: false,
      };
    },
    change(key, value) {
      if (key === "type") this.finalAttrs = this.getAttrs();
    },
    validate(fn) {
      return this.$refs["form"].$refs["form"].validate(fn);
    },
    resetFields() {
      return this.$refs["form"].$refs["form"].resetFields();
    },
  },
};
</script>
<style scoped></style>
